<template>
    <div>


        <p style="margin: 20px 0;">

            <!-- <el-button @click="$refs.plTreeTable.toggleTreeExpansion(treeData[1])">切换第二个</el-button>
            <el-button @click="$refs.plTreeTable.setTreeExpansion(treeData[1], true)">展开第二个</el-button> -->
            <el-button @click="$refs.plTreeTable.setAllTreeExpansion()">展开全部</el-button>
            <el-button @click="$refs.plTreeTable.clearTreeExpand()">关闭所有</el-button>
            <!-- <el-button @click="getTreeExpansionEvent">获取已展开</el-button> -->
        </p>
        <div>
            <SearchFormDate :curData="curData" ref="resetCommon" @child="child"></SearchFormDate>
        </div>
        <div>

            <el-col style="text-align:center;line-height:23px;" :span="3"> 部门</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">发货量</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">退货量</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">退货比例</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">归还</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">未归还</el-col>
            <el-col style="text-align:center;line-height:23px;" :span="3">归还比例</el-col>
        </div>
        <u-table ref="plTreeTable" fixed-columns-roll beautify-table header-drag-style :height="height" :treeConfig="{
            children: 'children',
            iconClose: 'el-icon-folder-add',
            iconOpen: 'el-icon-folder-remove',
            expandAll: false
        }" @toggle-tree-expand="toggleTreeExpand" use-virtual row-id="id" border>
            <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
            <!-- <u-table-column :tree-node="true" prop="label" label="我是树节点" fixed :width="200" />
            <u-table-column prop="id" label="id" fixed :width="200" /> -->
            <u-table-column :tree-node="true" prop="userName" label="分类(部门)" fixed :width="200" />
            <u-table-column prop="sampleNum" label="发货量" fixed :width="200" />
            <u-table-column prop="returnedNum" label="退货量" fixed :width="200" />
            <u-table-column prop="returnedRatioStr" label="退货比例" fixed :width="200" />
            <u-table-column prop="returnNum" label="归还" fixed :width="200" />
            <u-table-column prop="noReturnNum" label="未归还" fixed :width="200" />
            <u-table-column prop="returnRatioStr" label="归还比例" fixed :width="200" />
            <!-- <u-table-column v-for="item in columns" :key="item.id" :prop="item.prop" :label="item.label"
                :width="item.width" /> -->
        </u-table>
    </div>
</template>
 
<script>

import SearchFormDate from "@/components/SearchFormDate";

import { listApplydwd, getApplydwd, delApplydwd, addApplydwd, updateApplydwd, selectdeptUserSampleNum } from "@/api/sample/applydwd";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
export default {
    components: {
        SearchFormDate,
    },
    data() {
        return {
            curData: {
                type: 1,
                dateRange: {
                    beginTime: "",
                    endTime: "",
                },
            },
            params: {
                queryType: 1,
                startDate: "",
                endDate: "",
            },
            height: 750,
            columns: Array.from({ length: 10 }, (_, idx) => ({
                prop: 'address', id: idx, label: '地址' + idx, width: 200
            }))
        }
    },

    mounted() {
        // console.log(500 + (500 * 500) + (500 * 500 * 10))
        // const data = Array.from({ length: 500 }, (_, idx) => ({
        //     id: idx + '_' + 1,
        //     date: '2016-05-03',
        //     name: 1,
        //     ab: '欢迎使用u-table',
        //     address: idx,
        //     children: Array.from({ length: 2 }, (_, idx2) => ({
        //         id: idx + '_' + idx2 + '_' + 1,
        //         date: '2016-05-03',
        //         name: 1,
        //         ab: '欢迎使用u-table',
        //         address: idx + '_' + idx2,
        //         children: Array.from({ length: 1 }, (_, idx3) => ({
        //             id: idx + '_' + idx2 + '_' + idx3 + '_' + 1,
        //             date: '2016-05-03',
        //             name: 1,
        //             ab: '欢迎使用u-table',
        //             address: idx + '_' + idx2 + '_' + idx3
        //         }))
        //     }))
        // }));


        // var data = []
        // deptTreeSelect().then(response => {
        //     // this.treeData = response.data;
        //     data = response.data;
        //     console.log(JSON.stringify(data));
        //     this.treeData = data // 知道为啥treeData不在 data()方法里面定义吗？嘻嘻
        //     // 设置表格数据
        //     this.$refs.plTreeTable.reloadData(data)
        //     // 获取表格实例，里面可以得到列，表格数据等等
        //     console.log(this.$refs.plTreeTable.tableExample())
        // });
        // console.log(JSON.stringify(data));

        selectdeptUserSampleNum(this.queryParams).then(response => {
            // this.applydwdList = response;
            const tree = this.convertToTree(response)
            console.log(JSON.stringify(tree));
            const data = []
            for (let key in tree) {
                console.log(key); // 输出对象的键（"商品部"和"采购部"）
                console.log(JSON.stringify(tree[key])); // 输出对象的值（对应的子对象）
                data.push(tree[key])
            }
            console.log(JSON.stringify(data));

            this.treeData = data // 知道为啥treeData不在 data()方法里面定义吗？嘻嘻
            // 设置表格数据
            this.$refs.plTreeTable.reloadData(data)

        });

    },
    methods: {
        child(objArgu, weekTime) {
            this.objArgu = objArgu;
            this.params.queryType = objArgu.cType;
            this.params.startDate = objArgu.beginTime;
            this.params.endDate = objArgu.endTime;
            this.weekTime = weekTime;
            console.log(JSON.stringify(this.params));

        },

        convertToTree(data) {
            const tree = {};
            data.forEach(item => {
                const deptName = item.deptName;
                if (!tree[deptName]) {
                    // tree[deptName] = {
                    tree[deptName] = {
                        children: [],
                        // count: 0,
                        sampleNum: 0,
                        returnNum: 0,
                        noReturnNum: 0,
                        returnedNum: 0,
                        sendRatio: 0,
                        returnRatio: 0,
                        returnedRatio: 0,
                        returnRatioStr: "",
                        returnedRatioStr: "",
                        userName: item.deptName
                    };
                }
                // tree[deptName].children.push(item);
                tree[deptName].children.push(item);
                // tree[deptName].count++;
                tree[deptName].sampleNum += item.sampleNum;
                tree[deptName].returnNum += item.returnNum;
                tree[deptName].noReturnNum += item.noReturnNum;
                tree[deptName].returnedNum += item.returnedNum;
                tree[deptName].sendRatio += item.sendRatio;
                tree[deptName].returnRatio += item.returnRatio;
                tree[deptName].returnedRatio += item.returnedRatio;
            });

            // Calculate average values
            Object.values(tree).forEach(node => {
                // node.sendRatio /= node.count;
                // node.returnRatio /= node.count;
                // node.returnedRatio /= node.count;
                node.returnRatioStr = ((node.returnNum / (Number(node.returnNum) + Number(node.noReturnNum))) * 100).toFixed(2) + "%";
                node.returnedRatioStr = ((node.returnedNum / node.sampleNum) * 100).toFixed(2) + "%";
            });


            return tree;
        },
        // 获取已经展开的节点
        getTreeExpansionEvent() {
            console.log(this.$refs.plTreeTable.getTreeExpandRecords())
        },
        // 收起展开时触发
        toggleTreeExpand(row, treeExpanded, event) {
            console.log(row, treeExpanded, event)
        }
    }
}
</script>